<template>
  <div class="mod-config" ref="modConfigRef">
    <split-pane class="splitPane" :min-percent='50' :default-percent='85' split="vertical">
      <template slot="paneL">
        <el-tabs v-model="activeName" type="card" closable @tab-click="handleClick">
          <el-tab-pane label="合同信息" name="contractInfo">
            <ContractInfoTab></ContractInfoTab>
          </el-tab-pane>
          <el-tab-pane label="开模信息" name="modelInfo">
            <ModelInfoTab :tabHeight="this.modConfigHeight"></ModelInfoTab>
          </el-tab-pane>
          <el-tab-pane label="打样信息" name="proofingInfo">
            <SampleInfoTab :tabHeight="this.modConfigHeight"></SampleInfoTab>
          </el-tab-pane>
          <el-tab-pane label="询价记录" name="inquiryInfo">
           <InquiryInfoTab :tabHeight="this.modConfigHeight"></InquiryInfoTab>
          </el-tab-pane>
          <el-tab-pane label="采购信息" name="purchaseProductInfo">
            <PurchaseProductInfoTab :tabHeight="this.modConfigHeight"></PurchaseProductInfoTab>
          </el-tab-pane>
          <el-tab-pane label="入库记录" name="putInStorage">

          </el-tab-pane>
          <el-tab-pane label="出库记录" name="leaveStorage">出库记录</el-tab-pane>
          <el-tab-pane label="质检记录" name="qualityInfo">质检记录</el-tab-pane>
          <el-tab-pane label="财务记录" name="financeInfo">财务记录</el-tab-pane>
          <el-tab-pane label="退货记录" name="returnInfo">退货记录</el-tab-pane>
          <el-tab-pane label="跟进记录" name="processInfo">跟进记录</el-tab-pane>
        </el-tabs>
      </template>
      <template slot="paneR">
        <el-card class="box-card" style="overflow: auto">
          <div slot="header" style="padding:8px 17px" class="clearfix">
            <span>业务流程时间线</span>
          </div>
          <el-timeline>
            <el-timeline-item v-for="(activity, index) in activities" :key="index" :icon="activity.icon"
              :type="activity.type" :color="activity.color" :size="activity.size" :timestamp="activity.timestamp">
              {{ activity.content }}
            </el-timeline-item>
          </el-timeline>
        </el-card>

      </template>
    </split-pane>

  </div>
</template>


<script>
import basicMixins from '@/utils/commonViewMixins'
// tabs
import ContractInfoTab from '@/views/modules/contract/businessContractTab/contractInfoTab.vue'
import ModelInfoTab from '@/views/modules/contract/businessContractTab/modelInfoTab.vue'
import SampleInfoTab from '@/views/modules/contract/businessContractTab/sampleInfoTab.vue'
import InquiryInfoTab from '@/views/modules/contract/businessContractTab/inquiryInfoTab.vue'
import purchaseProductInfoTab from '@/views/modules/contract/businessContractTab/purchaseProductInfoTab.vue'
import {mRequest} from '@/utils/request'

export default {
  mixins: [basicMixins],
  components: {
    // tabs
    ContractInfoTab,
    ModelInfoTab,
    SampleInfoTab,
    InquiryInfoTab,
    purchaseProductInfoTab,
  },
  data() {
    return {
      activeName: 'contractInfo',
      activities: [
        {
          content: '客户确认订单信息',
          timestamp: '2018-04-12 20:46',
          size: 'large',
          type: 'primary',
          icon: 'el-icon-more'
        },
        {
          content: '合同预付款确认收款',
          timestamp: '2018-04-03 20:46',
          color: '#0bbd87'
        }, {
          content: '采购询价完成',
          timestamp: '2018-04-03 20:46',
          size: 'large'
        },
        {
          content: '财务审核询价完成',
          timestamp: '2018-04-03 20:46',
          size: 'large'
        },
        {
          content: '订单开模中',
          timestamp: '2018-04-03 20:46'
        },
        {
          content: '订单开模完成',
          timestamp: '2018-04-03 20:46',
          size: 'large'
        },
        {
          content: '订单打样中',
          timestamp: '2018-04-03 20:46',
          size: 'large'
        },
        {
          content: '订单打样完成',
          timestamp: '2018-04-03 20:46',
          size: 'large'
        },
        {
          content: '预计上机时间',
          timestamp: '2018-04-03 20:46'
        },
        {
          content: '生产中',
          timestamp: '2018-04-03 20:46'
        },
        {
          content: '成品入库',
          timestamp: '2018-04-03 20:46'
        },
        {
          content: '质检完成',
          timestamp: '2018-04-03 20:46'
        },
        {
          content: '合同尾款确认收款',
          timestamp: '2018-04-03 20:46',
          type: 'success'
        },
        {
          content: '出库中',
          timestamp: '2018-04-03 20:46',
          type: 'success'
        },
        {
          content: '出库完成',
          timestamp: '2018-04-03 20:46',
          color: '#0bbd87'
        }

      ],
      modConfigHeight:0,
    }
  },
  activated () {
    this.contractOrderId = this.$route.query.contractOrderId
    console.log(this.contractOrderId+ '     activated==============')
    this.showContractOrderTineLineInfo()
  },
  mounted() {
    this.modConfigHeight = this.$refs.modConfigRef.offsetHeight - 40-15;
  },
  methods: {
    showContractOrderTineLineInfo(){
      console.log('showContractOrderTineLineInfo======================')
      // 查询同期考试列表及证书
      mRequest('orderApi/getOrderTimeLineInfoByOrderDetailId',{contractOrderId:  this.contractOrderId },(res)=>{
        this.activities = this.R.pathOr([], ['data', 'list'], res)

      })
    },
    handleClick(tab, event) {
      // console.log(tab, event)
    },
  },
}
</script>
<style scoped>
.el-card /deep/ .el-card__header {
  padding: 0 20px;
  border-bottom: 1px solid #e6ebf5;
  box-sizing: border-box;
}

.el-card /deep/ .el-card__body {
  height: 1080px;
}

.el-form-item {
  margin-bottom: 10px;
}
</style>
